<template>
  <div class="baseTitle">
    <div class="carcet"></div>
    <div class="title">{{title}}</div>
    <div class="more" v-if="more" @click="handleMoreClick">
      <a v-if="isRouterJump" :href="MoreUrl">更多 &gt;</a>
      <span v-else>更多 &gt;</span>
    </div>
    <div class="title-right">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "baseTitle",
  props: {
    title: {
      type: String,
      default: "标题"
    },
    more: {
      type: Boolean,
      default: false
    },
    MoreUrl: {
      type: String,
      default: ""
    },
    isRouterJump: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleMoreClick () {
      this.$emit("MoreClick");
    }
  }
};
</script>

<style lang="less" scoped>
.baseTitle {
  display: flex;
  height: 40px;
  border-bottom: 1px solid #ddd;
  align-items: center;
  padding-left: 10px;
  position: relative;
  .carcet {
    // position: absolute;
    width: 2px;
    height: 14px;
    .bgColor();
    // border: 8px solid transparent;
    // border-top: 8px solid transparent;
    // border-left: 8px solid #409eff;
    // .borderColor(border-left-color);
    // border-bottom: 8px solid transparent;
    margin-right: 10px;
  }
  .title {
    .color();
    font-weight: bold;
  }
  .more{
    cursor: pointer;
    position: absolute;
    right: 10px;
    a,span{
      .color();
    }
  }
  .title-right{
    position: absolute;
    right: 10px;
  }
}
</style>
